<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("physicsCanvas");
    const ctx = canvas.getContext("2d");

    // Parameters for the drawing
    const cx = 220;
    const cy = 250;
    const innerRadius = 140;
    const pipeThickness = 12;
    const outerRadius = innerRadius + pipeThickness;
    const beadRadius = 7;
    const centerDotRadius = 4;
    const arrowLength = 100;
    const arrowHeadSize = 12;

    // --- Helper function to draw an arrow ---
    function drawArrow(fromX, fromY, toX, toY) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        
        // Save current style
        const originalFillStyle = ctx.fillStyle;
        const originalStrokeStyle = ctx.strokeStyle;
        const originalLineWidth = ctx.lineWidth;

        // Style for the arrow
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the line shaft
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw the filled arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - arrowHeadSize * Math.cos(angle - Math.PI / 6), toY - arrowHeadSize * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - arrowHeadSize * Math.cos(angle + Math.PI / 6), toY - arrowHeadSize * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
        
        // Restore original style
        ctx.fillStyle = originalFillStyle;
        ctx.strokeStyle = originalStrokeStyle;
        ctx.lineWidth = originalLineWidth;
    }

    // --- Main Drawing Logic ---

    // 1. Draw the ring (pipe)
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.arc(cx, cy, outerRadius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(cx, cy, innerRadius, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the dashed vertical line
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.setLineDash([6, 5]);
    ctx.moveTo(cx, cy - innerRadius);
    ctx.lineTo(cx, cy + innerRadius);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // 3. Draw the center dot
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(cx, cy, centerDotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 4. Define bead positions
    const topBeadY = cy - innerRadius;
    const bottomBeadY = cy + innerRadius;

    // 5. Draw the velocity vectors
    const arrowStartX = cx;
    const arrowEndX = cx + arrowLength;
    drawArrow(arrowStartX, topBeadY, arrowEndX, topBeadY);
    drawArrow(arrowStartX, bottomBeadY, arrowEndX, bottomBeadY);

    // 6. Draw the two beads on top of the vector lines
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(cx, topBeadY, beadRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(cx, bottomBeadY, beadRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 7. Draw the labels
    ctx.fillStyle = 'black';
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Label M
    ctx.font = "italic 30px 'Times New Roman'";
    ctx.fillText("M", cx - outerRadius - 40, cy - 30);

    // Labels m
    ctx.font = "italic 26px 'Times New Roman'";
    ctx.fillText("m", cx, topBeadY - 25);
    ctx.fillText("m", cx, bottomBeadY + 25);

    // Labels A and B
    ctx.font = "italic 28px 'Times New Roman'";
    ctx.fillText("A", cx - 35, cy - innerRadius * 0.5);
    ctx.fillText("B", cx - 35, cy + innerRadius * 0.5);

    // Labels v₀
    const v_x = arrowEndX + 28;
    const v_y_top = topBeadY;
    const v_y_bottom = bottomBeadY;

    // Top v₀
    ctx.font = "italic 26px 'Times New Roman'";
    ctx.fillText("v", v_x, v_y_top);
    ctx.font = "italic 18px 'Times New Roman'";
    ctx.fillText("0", v_x + 10, v_y_top + 7);

    // Bottom v₀
    ctx.font = "italic 26px 'Times New Roman'";
    ctx.fillText("v", v_x, v_y_bottom);
    ctx.font = "italic 18px 'Times New Roman'";
    ctx.fillText("0", v_x + 10, v_y_bottom + 7);

</script>
</body>
</html>